import React, { useEffect, useRef } from 'react'
import { Outlet } from 'react-router-dom'
import Tabbar from '../../components/Tabbar/Tabbar'
import './Home.css'
import ajax from '../../api/ajax'
import { userChangeAsync } from '../../redux/UserSlice/UserSlice'
import { DetailGet } from '../../redux/DetailSlice/DetailSlice'
import TimeChange from '../../components/Times/TimeChange'
import { useDispatch, useSelector } from 'react-redux'


export default function Home() {
    const containRef = useRef()
    const dispatch = useDispatch()
    window.addEventListener("resize", function () {
        containRef.current.style.height = document.documentElement.clientHeight * 0.88 + 'px'
    });
    useEffect(() => {
        containRef.current.style.height = document.documentElement.clientHeight * 0.88 + 'px'
    }, [document.documentElement.clientHeight])
    const fontSize = useSelector(state => state.SettingSliceReducer.fontSize);
    const bg_1 = useSelector(state => state.SettingSliceReducer.bg_1);
    const bg_2 = useSelector(state => state.SettingSliceReducer.bg_2);
    useEffect(() => {
        document.documentElement.style.setProperty('--fontSize', fontSize);
        document.documentElement.style.setProperty('--bg_1', bg_1);
        document.documentElement.style.setProperty('--bg_2', bg_2);
    }, [fontSize, bg_1, bg_2])

    const fechUser = async () => {
        const result = await ajax.post('/user/getById')
        if (result.msg === 'success') {
            // console.log('result-user', result);
            dispatch(userChangeAsync(result.data))
            localStorage.setItem('user', JSON.stringify(result.data))
        }
    }

    // 获取账单信息
    const fechDetail = async () => {
        const result = await ajax.post('/bill/allBill', {
            userId: JSON.parse(localStorage.getItem('userToken')).tel,
        })
        if (result.msg === 'success') {
            result.data = result.data.map(item => {
                item.time = TimeChange(item.time)
                return item
            })
            // 获取数据
            dispatch(DetailGet(result.data))
        }
    }
    useEffect(() => {
        fechDetail()
        // fechUser()
    }, [])
    return (
        <div className='Home'>
            <div className='contain' ref={containRef}>
                <Outlet />
            </div>
            <Tabbar />
        </div>
    )
}
